<template>
  <div class="btns">

    <el-dropdown v-if="has('关联单据') && dropdownItems.length" class="dropdown" :class="{onebtn: btns.length === 1}" @command="handleDropdownCommand">
      <el-button class="btn" type="primary" size="mini">关联单据</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in dropdownItems" :command="item.command" :key="item.command">{{item.text}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-button v-if="has('休眠')" class="btn" type="primary" size="mini" :disabled="disabledBtn('休眠')" @click="sleep">休眠</el-button>
    <el-button v-if="has('驳回')" class="btn" type="primary" size="mini" :disabled="disabledBtn('驳回')" @click="reject">驳回</el-button>
    <el-button v-if="has('取消')" class="btn" type="primary" size="mini" :disabled="disabledBtn('取消')" @click="cancel">取消</el-button>
    <el-button v-if="has('下发')" class="btn" type="primary" size="mini" :disabled="disabledBtn('下发')" @click="next">下发</el-button>
    <el-button v-if="has('提交')" class="btn" type="primary" size="mini" :disabled="disabledBtn('提交')" @click="submit">提交</el-button>
    <el-button v-if="has('通过')" class="btn" type="primary" size="mini" :disabled="disabledBtn('通过')" @click="adopted">通过</el-button>
    <el-button v-if="has('完成')" class="btn" type="primary" size="mini" :disabled="disabledBtn('完成')" @click="done">完成</el-button>

  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  export default {
    props: {
      disabledBtns: {
        type: Array,
        default: () => [],
      },
      details: {
        type: Object,
        default: () => ({
          characterId: '',
          ctype: 0,
          orderid: '',
          associateItem: '',
          npsBaseInfo: {},
          twCallbackBaseInfo: {},
          npsDerogatoryInfo: {},
          npsApproveFlows: []
        }),
      }
    },
    data() {
      return {}
    },
    computed: {
      ...mapState({
        platformType: state => state.disparageManage.platformType,
        ctype: state => state.disparageManage.ctype,
        currentOrderUserType: state => state.disparageManage.currentOrderUserType,
        currentOrderCtype: state => state.disparageManage.currentOrderCtype,
        currentOrderStatus: state => state.disparageManage.currentOrderStatus
      }),
      ...mapGetters([
        'userType',
        'disparageType'
      ]),
      // 是否分公司管理员
      isFGLY() {
        return this.currentOrderUserType === this.platformType.FGLY
      },

      // 是否销司总部
      isXSZB() {
        return this.currentOrderUserType === this.platformType.XSZB
      },

      // 是否用户运营中心
      isYYZX() {
        return this.currentOrderUserType === this.platformType.YYZX
      },

      dropdownItems() {
        const itemStr = this.details.associateItem
        if(!itemStr) {
          return []
        }
        const commands = [
          {
            command: 'bsxf',
            text: '贬损下发'
          },
          {
            command: 'bszh',
            text: '贬损转化'
          },
          {
            command: 'echf',
            text: '二次回访'
          }
        ]
        return itemStr.indexOf(',') > -1 ? itemStr.replace(/,$/, '').split(',').map(item => commands[+item]) : []
      },
      btns() {
        const status = this.currentOrderStatus
        const ctype = this.currentOrderCtype
        const BSXF = this.ctype.BSXF
        const BSZH = this.ctype.BSZH
        const ECHF = this.ctype.ECHF

        if(this.isYYZX) {
          if(ctype === BSXF) {
            return status === '1' ? ['下发', '驳回', '休眠'] : ['关联单据']
          }
          if(ctype === BSZH) {
            const flow = this.details.npsApproveFlows.filter(item => item.ctype === 3)[0]
            const isForHelp = flow && flow.followResult === '2'
            if(status === '1') {
              return isForHelp ? ['关联单据', '通过', '驳回', '休眠'] : ['关联单据', '通过', '驳回']
            }
            return ['关联单据']
          }
          const isNormalHandle = status === '1'
          const isSaleRepForHelp = status === '6' || status === '7'
          const isManagerForHelp = status === '14'
          if(isNormalHandle) {
            return ['关联单据', '完成', '下发', '休眠']
          }
          if(isSaleRepForHelp) {
            return ['关联单据', '通过', '驳回']
          }
          if(isManagerForHelp) {
            return ['关联单据', '休眠', '驳回']
          }
          return ['关联单据']
          // const items = ['6', '7', '14']
          // const flag = items.indexOf(status) > -1
          // return status === '1' ? ['关联单据', '完成', '下发', '休眠'] : flag ? ['关联单据', '通过', '驳回'] : ['关联单据']
        }
        if(this.isXSZB) {
          if(ctype === BSXF) {
            return status === '1' ? ['关联单据', '下发', '驳回'] : ['关联单据']
          }
          if(ctype === BSZH) {
            return status === '1' ? ['关联单据', '通过', '驳回'] : ['关联单据']
          }
          const items = ['6', '7']
          const flag = items.indexOf(status) > -1
          return status === '1' ? ['关联单据', '下发', '驳回'] : flag ? ['关联单据', '通过', '驳回'] : ['关联单据']
        }
        if(this.isFGLY) {
          if(status == 1 || status == 13) {
            return ['关联单据', '下发']
          }
          if(status == 2 || status == 11) {
            return ['关联单据', '提交']
          }
          return ['关联单据']
        }
        return []
      },
    },
    methods: {
      has(name) {
        return this.btns.indexOf(name) > -1
      },

      // 禁用按钮
      disabledBtn(name) {
        if(!this.has(name)) {
          return false
        }
        return this.disabledBtns.indexOf(name) > -1
      },

      // 休眠
      sleep() {
        this.$emit('sleep')
      },

      // 驳回
      reject() {
        this.$emit('reject')
      },

      // 取消
      cancel() {
        this.$emit('cancel')
      },

      // 下发
      next() {
        this.$emit('next')
      },

      // 提交
      submit() {
        this.$emit('submit')
      },

      // 通过
      adopted() {
        this.$emit('adopted')
      },

      // 完成
      done() {
        this.$emit('done')
      },

      // 单据关联
      handleDropdownCommand(command) {
        let ctype
        switch (command) {
          case 'bsxf':
            ctype = 0
            break;
          case 'bszh':
            ctype = 1
            break;
          case 'echf':
            ctype = 2
            break;
        }
        this.$emit('ordersRelate', ctype)
      },

    }
  }
</script>

<style lang="scss" scoped>

  .btn {
    border-color: #f00;
    background-color: #f00;
    &.is-disabled{
      border-color: #ccc;
      background-color: #ccc;
    }
  }

  .dropdown{
    margin-right: 10px;
    &.onebtn{
      margin-right: 0;
    }
  }

</style>
